<template>
	<view>
		<view class="postTitle-name">
			<up-input placeholder="请输入完整帖子标题" border="bottom" v-model="value"></up-input>
		</view>
		<view class="text-textarea">
			<u--textarea v-model="value1" placeholder="请输入正文" border="none">
			</u--textarea>
			<view class="ccc">
				<view>
					<uni-file-picker ref="filespicker" v-model="imageValue" fileMediatype="all" mode="grid"
						@select="select" @progress="progress" @success="success" @fail="fail" />
				</view>
			<!-- 	<view class="example-body" ref="filespicker">
					<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
				</view>
				<view class="example-body" ref="filespicker">
					<uni-file-picker limit="9" file-mediatype="video" title="最多选择9个视频"></uni-file-picker>
				</view> -->
			</view>
		</view>
		<view class="type">
			<view class="type-text">请选择发布类型</view>
			<view class="up-tag-label">
				<up-tag class="up-tag" v-for="(item, index) in topicList" :key="index" :text="item.topicName"
					type="info" :plainFill="true" size="large" :bgColor="item.isActive ? '#8DC18B' : '#F8E2A4'"
					borderColor="#F8E2A4" shape="circle" @click="tapTag(item.topicName,index)"></up-tag>
			</view>
		</view>
		<view class="bottom-sumit">
			<view class="bottom-sumit-text" @click="release(data)">
				发布
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	//导入新增帖子接口
	import {
		addPost
	} from '@/api/tiezi/post'
	import {
		getUser
	} from "@/utils/auth";
	import {
		listTopic,
		addTopic
	}
	from '@/api/topic'
	//定义主题列表
	const topicList = ref([])
	//生命周期开始
	onMounted(() => {
		listTopic().then((res) => {
			// console.log(res.rows.slice(1), '主题res')
			topicList.value = res.rows.slice(1).map(item => ({
				...item,
				isActive: false,
			}))
			// console.log(topicList.value, 'topicList.value')
		})
	})
	//userid
	const userid = getUser()
	//用户发布帖子，必须选择帖子类型，否则报提示
	const tapTag = ((e, clickedIndex) => {
		postType.value = e
		//循环数组作为条件
		topicList.value.forEach((item, i) => {
			item.isActive = i === clickedIndex;
		});
	})
	//帖子类型
	const postType = ref('')
	//图片列表---数组形式
	const fileList = ref([])
	//新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList.value.length;
		lists.map((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList.value[fileListLen];
			fileList.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};
	//上传图片、视频
	const uploadFilePromise = (url) => {
		console.log(url, 'qw')
		return new Promise((resolve, reject) => {
			uni.uploadFile({
				url: 'http://localhost:8080/common/upload',
				filePath: url,
				name: 'file',
				extname: "txt",
				formData: {
					// user: 'test',
					avatarfile: '(binary)'
				},
				success: (res) => {
					const list = JSON.parse(res.data)
					// // data.value.imgUrl = list.url
					// //设置定时器
					// setTimeout(() => {
					resolve(list);
					// }, 1000);
				},
			});
		});
	};
	const value = ref(''); //帖子标题
	const value1 = ref(''); //帖子内容

	const imageValue = ref([]); //帖子图片
	const img_url_list = ref([]); //帖子图片列表
	const video_url_list = ref([]); //帖子视频列表
	const success = ((res) => {
		uploadFilePromise(res.tempFiles[0].path).then((res) => {
			let a = res.fileName.split(".")
			a[1] == 'mp4' ? video_url_list.value.push(res.url) : img_url_list.value.push(res.url)
		})


	})
	const filespicker = ref(null)
	const select = ((res) => {
		console.log(filespicker, '4444')
		// console.log(res, '000000res')
		filespicker.value.upload()

	})

	const progress = ((res) => {
		console.log(res, '6666')
	})

	const fail = ((res) => {
		console.log(res, '5555')
	})
	// 删除图片(当点击删除按钮时，触发 deletePic 方法来删除对应的文件。)
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
	};
	//调接口上传数据
	const data = ref({
		title: value,
		content: value1,
		imgUrl: null,
		videoUrl: null,
		userId: userid,
		type: postType
	})
	//类型选择标志位
	const show = ref(false)
	const cancel = (() => {
		show.value = false;
	})
	const title = ref('请选择帖子类型')
	//点击模态框确定按钮
	const confirm = ((e) => {
		console.log(e, 'data是个啥')
		e.imgUrl = JSON.stringify(img_url_list.value)
		// console.log(typeof e.imgUrl,'11111111')
		e.videoUrl = JSON.stringify(video_url_list.value)
		//调用发布帖子接口
		addPost(e).then((res) => {
			uni.showToast({
				title: '发布成功',
				icon: 'none'
			})
			img_url_list.value = []
			video_url_list.value = []
			show.value = false;
		})
	})
	//点击发布，即（发布帖子）
	function release(e) {
		e.imgUrl = JSON.stringify(img_url_list.value)
		e.videoUrl = JSON.stringify(video_url_list.value)
		console.log(e, '666')
		addPost(e).then((res) => {
			uni.showToast({
				title: '发布成功',
				icon: 'none'
			})
			img_url_list.value = []
			video_url_list.value = []
			show.value = false;
		})

	}
</script>

<style lang="scss" scoped>
	.postTitle-name {
		margin-top: 10rpx;
		// padding:200rpx;
	}

	.text-textarea {
		margin-top: 20rpx;
	}

	.type {

		/* 设置标签之间的间距 */
		.type-text {
			padding: 15rpx 25rpx;
		}

		.up-tag-label {
			display: flex;
			flex-wrap: wrap;
			/* 允许换行 */
			justify-content: flex-start;
			/* 根据需要调整对齐方式，这里使用默认的从左开始 */
			gap: 20rpx;
		}
	}

	:deep(.u-tag-wrapper) {
		margin: 20rpx 25rpx auto;
		width: 220rpx;
	}

	:deep(.u-tag__text) {
		margin: auto;
	}


	//CSS深度查询
	:deep(.u-textarea) {
		background-color: rgba(242, 242, 242, 1);
	}

	.ccc {
		padding: 20px;
	}

	.bottom-sumit {
		position: fixed;
		bottom: 0rpx;
		background-color: rgba(255, 255, 255, 1);
		width: 100%;

		.bottom-sumit-text {
			width: auto;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 36rpx;
			background-color: rgba(255, 98, 0, 1);
			color: rgba(255, 255, 255, 1);
			margin: 18rpx 40rpx;
		}
	}

	// .aa{
	// 	position: absolute;
	// 	top:50%;
	// 	left:50%;
	// 	transform: translate(-50%,-50%);
	// }

	:deep(.uni-navbar) {
		display: flex;
		background-color: #fff;
		justify-content: center;
	}
</style>